<script>
import _ from 'lodash'
import moment from 'moment'
import DeviceService from '@/request/reservation/device'
import Vue from 'vue'
import VueFullcalendar from '@/components/VueFullcalendar'

Vue.use(VueFullcalendar)

export default {
  name: 'ReservationSkill',
  components: {
  },
  data () {
    return {
      options: {
        height: 650,
        locale: 'zh-cn',
        editable: true,
        selectable: false,
        allDaySlot: false,
        slotDuration: '00:30:00',
        defaultView: 'agendaDay',
        eventResourceField: 'device',
        slotLabelFormat: 'HH:mm',
        minTime: '08:00:00',
        maxTime: '18:00:00',
        header: {
          left: 'title',
          center: '',
          right: 'prev,next'
        }
      },
      currentDate: moment().startOf('day'),
      devices: [],
      resources: [],
      status: [],
      backEvents: [],
      dataEvents: [],
      events: []
    }
  },
  created: function () {
    this.listDevice()
    this.createBtns()
    // this.listDeviceState()
  },
  watch: {
    'backEvents': 'merge',
    'currentDate': 'changeDate'
  },
  methods: {
    merge () {
      this.dataEvents = [{
        id: 1,
        device: 1,
        title: 'CT导向下穿刺',
        start: '2018-06-30T13:00:00',
        end: '2018-06-30T14:00:00',
        color: '#409EFF',
        durationEditable: false,
        resourceEditable: true
      }, {
        id: 2,
        device: 4,
        title: 'T管造影全套',
        start: '2018-06-30T14:00:00',
        end: '2018-06-30T15:00:00',
        color: '#409EFF',
        durationEditable: false,
        resourceEditable: true
      }, {
        id: 3,
        device: 5,
        title: '下腔静脉磁共振平扫*1.5T',
        start: '2018-06-30T15:00:00',
        end: '2018-06-30T16:00:00',
        color: '#409EFF',
        durationEditable: false,
        resourceEditable: true
      }]
      this.events = _.concat(this.backEvents, this.dataEvents)
    },
    updateBackEvent () {
      if (this.status.length <= 0) {
        return
      }
      this.backEvents = []
      let bes = []
      let dateStart = this.getDate().startOf('day').valueOf()
      let min = 8
      _.forEach(this.status, value => {
        let device = value.did
        let sduration = value.number * value.step + min
        let eduration = (value.number + 1) * value.step + min
        let stime = moment(dateStart).add(sduration, 'h')
        let etime = moment(dateStart).add(eduration, 'h')
        let bevent = {
          start: stime,
          end: etime,
          device: device,
          rendering: 'background',
          overlap: true,
          color: '#67C23A'
        }
        if (value.already > 5 && value.already < value.total) {
          bevent.color = '#E6A23C'
        } else if (value.already >= value.total) {
          bevent.color = '#F56C6C'
          bevent.overlap = false
        }
        bes.push(bevent)
      })
      this.backEvents = _.cloneDeep(bes)
    },
    createBtns () {
      this.options = _.defaultsDeep({
        customButtons: {
          customToday: {
            text: '今天',
            click: () => {
              this.currentDate = moment().startOf('day')
            }
          },
          customTomorrow: {
            text: '明天',
            click: () => {
              console.log(this.getDate())
              this.currentDate = moment().startOf('day').add(1, 'd')
            }
          },
          customThree: {
            text: '后天',
            click: () => {
              this.currentDate = moment().startOf('day').add(2, 'd')
            }
          }
        },
        header: {
          left: 'title',
          center: 'customToday,customTomorrow,customThree',
          right: 'prev,next'
        }
      }, this.options)
    },
    changeDate () {
      if (!this.currentDate) {
        this.currentDate = moment().startOf('day')
      }
      let calendar = this.$refs.calendar ? this.$refs.calendar.getInstance() : null
      if (calendar) {
        calendar.gotoDate(this.currentDate)
      }
    },
    getDate () {
      let calendar = this.$refs.calendar ? this.$refs.calendar.getInstance() : null
      if (calendar) {
        return calendar.getDate().local()
      }
      return this.currentDate
    },
    handleDropIn (date, jsEvent, ui, resourceId) {
      console.log(date)
      console.log(jsEvent)
      console.log(ui)
      console.log(resourceId)
    },
    handleClickEvent (calEvent, jsEvent, view) {
      console.log(calEvent)
      console.log(jsEvent)
      console.log(view)
    },
    handleDayRender (date, cell) {
      console.log(date)
      console.log(cell)
    },
    refresh () {
      console.log('refresh')
    },
    listDevice () {
      DeviceService.list().then(data => {
        data = data.result ? data.result : []
        this.devices = _.cloneDeep(data)
        this.resources = []
        _.forEach(this.devices, value => {
          this.resources.push({
            id: value.id,
            title: value.name
          })
        })
      })
    }
  }
}
</script>

<template>
  <el-container>
    <el-header height="45px">
      <el-form :inline="true" class="demo-form-inline" size="small">
        <el-form-item>
          <el-button type="primary" @click="refresh">刷新</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main class="scrollbar-wrap nopadding">
      <el-scrollbar class="full-scrollbar">
        <div class="padding-content calendar-wrap">
          <vue-fullcalendar
            ref="calendar"
            class="calendar"
            :options="options"
            :resources="resources"
            :events="events"
            @drop="handleDropIn"
            @eventClick="handleClickEvent"
            @dayRender="handleDayRender">
          </vue-fullcalendar>
        </div>
      </el-scrollbar>
    </el-main>
    <el-footer>
      <div class="clear">
        <div class="color-item color-item-1">空闲</div>
        <div class="color-item color-item-2">紧张</div>
        <div class="color-item color-item-3">满员</div>
        <div class="color-item color-item-4">当前患者安排情况</div>
      </div>
    </el-footer>
  </el-container>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.color-item {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
  background: #85ce61;
  color: #fff;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
  border: 1px solid #dcdfe6;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  font-weight: 500;
  font-size: 14px;
  border-radius: 4px;
  padding: 12px 20px;
}
.color-item-1 {
  background: #67C23A;
}
.color-item-2 {
  background: #E6A23C;
}
.color-item-3 {
  background: #F56C6C;
}
.color-item-4 {
  background: #409EFF;
}
</style>
